<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>WebSSH</title>
	
	<link href="../component/bootstrap/bootstrap.min.css" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" >
	<link href="../component/scrollbar/jquery.scrollbar.min.css" rel="stylesheet">
	<link href="../component/nth-tabs/css/nth.tabs.min.css" rel="stylesheet">
	<!-- <link href="../component/bootstrap-treeview/bootstrap-treeview.min.css" rel="stylesheet">
	<link href="../component/contextMenu/jquery.contextMenu.min.css" rel="stylesheet"> -->
	<link href="../component/layer/theme/default/layer.css" type="text/css" rel="stylesheet" >
	<link href="../component/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
	<link href="../css/xterm.css" rel="stylesheet"/>
	
	<script src="../js/jquery.min.js"></script>
	<script src="../component/bootstrap/bootstrap.min.js"></script>
    <script src="../component/scrollbar/jquery.scrollbar.min.js"></script>
	<script src="../component/nth-tabs/js/nth.tabs.min.js"></script>
	<!-- <script src="../component/bootstrap-treeview/bootstrap-treeview.min.js"></script> 
	<script src="../component/contextMenu/jquery.contextMenu.min.js"></script>
	<script src="../component/contextMenu/jquery.ui.position.js"></script>-->
	<script src="../component/zTree_v3/js/jquery.ztree.core.js" type="text/javascript" ></script>
	<script src="../component/zTree_v3/js/jquery.ztree.excheck.js" type="text/javascript" ></script>
	<script src="../component/zTree_v3/js/jquery.ztree.exedit.js" type="text/javascript" ></script>
	<script src="../component/layer/layer.js" type="text/javascript" ></script>
	<script src="../js/xterm.js" charset="utf-8"></script>
	<script src="../js/webssh.js" charset="utf-8"></script>
	<style type="text/css">
		div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
		div#rMenu ul li{
			margin: 1px 0;
			padding: 0 5px;
			cursor: pointer;
			list-style: none outside none;
			background-color: #DFDFDF;
		}
	</style>
    <script>
		var nthTabs, zTree, rMenu;
        $(function () {
            nthTabs = $("#editor-tabs").nthTabs();
            initTree();
        }); 
        function initTree(){
        	var setting = {
       			view: {
       				dblClickExpand: false
       			},
       			callback: {
       				onRightClick: OnRightClick
       			}
       		};
        	var zNodes =[{
        		id:2, 
        		name:"所有会话", 
        		open:true,
        		isRoot:true
        	}];
        	$.fn.zTree.init($("#treeview"), setting, zNodes);
        	zTree = $.fn.zTree.getZTreeObj("treeview");
			rMenu = $("#rMenu"); 
        }
        function OnRightClick(event, treeId, treeNode) {
			if (treeNode && treeNode.isRoot) {//选中根节点，可以新增
				zTree.selectNode(treeNode);
				showRMenu("root", event.clientX, event.clientY);
			}else if(treeNode && !treeNode.isRoot){//非根节点，删除节点
				zTree.selectNode(treeNode);
				showRMenu("node", event.clientX, event.clientY);
			}
		}

		function showRMenu(type, x, y) {
			$("#rMenu ul").show();
			if (type=="root") {
				$("#m_del").hide();
				$("#m_add").show();
			} else {
				$("#m_del").show();
				$("#m_add").hide();
			}
            y += document.body.scrollTop;
            x += document.body.scrollLeft;
            rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

			$("body").bind("mousedown", onBodyMouseDown);
		}
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
 		function onBodyMouseDown(event){
			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
				rMenu.css({"visibility" : "hidden"});
			}
		} 
        
		function removeTreeNode() {
			hideRMenu();
			var nodes = zTree.getSelectedNodes();
			if (nodes && nodes.length>0) {
				if (nodes[0].children && nodes[0].children.length > 0) {
					var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
					if (confirm(msg)==true){
						zTree.removeNode(nodes[0]);
					}
				} else {
					zTree.removeNode(nodes[0]);
				}
			}
		}
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
		function addTreeNode() {
			hideRMenu();
			layerInitSession();
		}
        var _tools = {
        	createSession : function (param){
        		console.log(param);
        		var newNode = { name:param.connectName,isRoot:false};
        		console.log(zTree.getSelectedNodes());
        		if (zTree.getSelectedNodes()[0]) {
    				newNode.checked = zTree.getSelectedNodes()[0].checked;
    				zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
    			} else {
    				zTree.addNodes(null, newNode);
    			}
        		var host = param.host;
        		var hostArr = host.split(".");
        		var nthTabId = hostArr[0] + hostArr[1] + hostArr[2] + hostArr[3];
        		var paramStr = JSON.stringify(param);
        		console.log(paramStr);
        		sessionStorage.setItem("shell-" + nthTabId, paramStr);
        		nthTabs.addTab({
                    id:"tabId-" + nthTabId,
                    title:param.connectName,
                    content:'<div id="shell-' + nthTabId + '" class="panel panel-primary" style="height:370px;"><button type="button" class="btn btn-primary" onclick="initShell(\'shell-' + nthTabId + '\');">连接</button></div>'
        		});
            }
        }
        function initShell(id){
        	var html = '<iframe style="width:100%;height:100%;" src="shell" frameborder="0" data="'+id+'"></iframe>';
        	$("#" + id).html(html);
        }
        window.tools = _tools;
        var index;
		function layerInitSession(){
			index = layer.open({
			  type: 2,
			  area: ['500px', '350px'],
			  fixed: false, //不固定
			  maxmin: true,
			  content: 'initSession'
			});
		}
    </script>
</head>
<body>
<div class="container" style="margin-top: 65px;border:1px solid black;height:450px;width:65%;">
	<div class="row">
		<div class="col-md-3" style="border:1px solid black;height:445px;">
			<ul id="treeview" class="ztree"></ul>
		</div>
		<div class="col-md-9">
			<div class="nth-tabs" id="editor-tabs">
			
			</div>
		</div>
	</div>
</div>
<div id="rMenu">
	<ul>
		<li id="m_add" onclick="addTreeNode();">增加节点</li>
		<li id="m_del" onclick="removeTreeNode();">删除节点</li>
	</ul>
</div>
</body>
</html>